<template>
  <div class="window">
    <div class="tp">
      <img src="../../../assets/two/xinde.png" alt="">
    </div>
    <div class="center" v-for="dc in cLc">
      <img :src="dc.im" alt="">
      <span>{{dc.name}}</span>
    </div>
    <hr>
    <p>热卖品类</p>
    <div class="dow" v-for="stu in aStus">
      <img :src="stu.tup" alt="">
      <span>{{stu.name}}</span>
    </div>

  </div>
</template>
<script>
  export default {
    data(){
      return{
        cLc:[
          {
            im: require('../../../assets/two/huaban.jpg'),
            name: '脚盆直邮'
          },
          {
            im: require('../../../assets/two/nvshen.jpg'),
            name: '美国直邮'
          },
          {
            im: require('../../../assets/two/qiao.jpg'),
            name: '英国直邮'
          },
          {
            im: require('../../../assets/two/cao.jpg'),
            name: '澳洲直邮'
          },
          {
            im: require('../../../assets/two/china.jpg'),
            name: '中国直邮'
          }
        ],
        aStus:[
          {
            tup: require('../../../assets/two/huazhuangpin.jpg'),
            name: '洁面护理'
          },
          {
            tup: require('../../../assets/two/kouhong.jpg'),
            name: '人气口红'
          },
          {
            tup: require('../../../assets/two/bao.jpg'),
            name: '名牌包包'
          },
          {
            tup: require('../../../assets/two/huazhuangpin.jpg'),
            name: '洁面护理'
          },
          {
            tup: require('../../../assets/two/kouhong.jpg'),
            name: '人气口红'
          },
          {
            tup: require('../../../assets/two/bao.jpg'),
            name: '名牌包包'
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .window p{
    font-size: 1.5rem;
    color: dimgray;
    margin: 0.6rem;
  }
  .tp img{
    width: 25rem;
  }
  .center {
    display: inline-block;
    margin: 1rem 1.5rem 1rem 1.5rem;
    padding-left: 0.3rem;
  }
  .center span{
    font-size: 1.3rem;
    color: gray;
  }
  .center img{
    display: block;
    width: 2.5rem;
    margin: auto;
    margin-bottom: 1rem;

  }
  .dow {
    display: inline-block;
    margin: 0.8rem 1.2rem 0.8rem 1.2rem;
    padding-left: 0.1rem;
  }
  .dow span{
    font-size: 1.3rem;
    color: dimgray;
  }
  .dow img{
    display: block;
    width: 5.8rem;
    margin: auto;
    margin-bottom: 0.6rem;

  }
</style>
